<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import type { Router } from "vue-router";
import useShopCartStore from "@/pinia/modules/shopCartStore/shopCartStore.ts";
import useUserStore from "@/pinia/modules/userStore/userStore.ts";
import LoginHeader from "@/views/login/components/loginHeader/loginHeader.vue";
import LoginFooter from "@/views/login/components/loginFooter/loginFooter.vue";
import CallbackBind from "@/views/login/components/callback/callbackBind.vue";
import CallbackPatch from "@/views/login/components/callback/callbackPatch.vue";

const router: Router = useRouter();

const shopCartStore = useShopCartStore();

const userStore = useUserStore();

const hasAccount = ref(true);


const isBindQQ = ref<boolean>(true);


const qqUserInfo = reactive({
   nickname: "",
   avatar: "",
   unionId: "",
});

const getQQUserInfo = () => {
   if (!QC.Login.check()) return;
   QC.api("get_user_info").success(result => {
      qqUserInfo.nickname = result.data.nickname;
      qqUserInfo.avatar = result.data.figureurl;
   });
};

const userQQLogin = async () => {
   if (!QC.Login.check()) return;
   QC.Login.getMe(async (openId: string) => {
      qqUserInfo.unionId = openId;
      try {
         const loginResult: string = await userStore.userQQLogin(openId, 1);
         await shopCartStore.mergeCart();
         ElMessage.success(loginResult);
         router.push("/");
      } catch (error: any) {
         getQQUserInfo();
         ElMessage.error(error.message);
         isBindQQ.value = false;
      }
   });

};


onMounted(() => {
   userQQLogin();
});

</script>

<template>
   <div class="callback">
      <login-header>
         <h4>联合登录</h4>
      </login-header>
      <section class="container">
         <template v-if="!isBindQQ">
            <div class="form">
               <nav class="tab">
                  <a @click="hasAccount=true" :class="{active:hasAccount}">
                     <i class="iconfont icon-bind" />
                     <span>已有小兔鲜账号，请绑定手机</span>
                  </a>
                  <a @click="hasAccount=false" :class="{active:!hasAccount}">
                     <i class="iconfont icon-edit" />
                     <span>没有小兔鲜账号，请完善资料</span>
                  </a>
               </nav>
               <div class="tab-content" v-if="hasAccount">
                  <CallbackBind :nickname="qqUserInfo.nickname" :avatar="qqUserInfo.avatar" :union-id="qqUserInfo.unionId"></CallbackBind>
               </div>
               <div class="tab-content" v-else>
                  <CallbackPatch :union-id="qqUserInfo.unionId"></CallbackPatch>
               </div>
            </div>
         </template>
         <template v-else>
            <div class="loading">
               <img src="../../../../assets/images/loading.gif" alt="">
               <span>QQ登录中</span>
            </div>
         </template>
      </section>
      <login-footer></login-footer>
   </div>
</template>

<style scoped lang="less">
.container {
   padding: 25px 0;

   .form {
      .tab {
         background: #fff;
         height: 80px;
         padding-top: 40px;
         font-size: 18px;
         text-align: center;

         a {
            color: #666;
            display: inline-block;
            width: 350px;
            line-height: 40px;
            border-bottom: 2px solid #e4e4e4;

            i {
               font-size: 22px;
               vertical-align: middle;
            }

            span {
               vertical-align: middle;
               margin-left: 4px;
            }

            &.active {
               color: @xtxColor;
               border-color: @xtxColor;
            }
         }
      }

      .tab-content {
         min-height: 600px;
         background: #fff;
      }
   }

   .loading {
      height: 680px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #fff;

      img {
         width: 120px;
      }

      span {
         color: @xtxColor;
         font-size: 18px;
         font-weight: 700;
      }
   }
}


</style>
